<template>
  <div class="changxin-express">
    <div class="section-header">
      <h3>
        <i class="fas fa-newspaper"></i>
        <span>昌欣快报</span>
      </h3>
      <NuxtLink to="/news" class="more-link">
        <span>更多资讯</span>
        <i class="fas fa-angle-double-right"></i>
      </NuxtLink>
    </div>

    <div class="news-grid">
      <!-- 行业资讯 -->
      <div class="news-card">
        <div class="news-image">
          <img src="/images/news-1.jpg" alt="湖北香菇产量创历史新高" />
          <div class="category-tag">行业资讯</div>
        </div>
        <div class="news-content">
          <h4 class="news-title">湖北香菇产量创历史新高,出口量同比增长30%</h4>
          <p class="news-description">2024年湖北省香菇产量突破80万吨,其中出口量达25万吨,同比增长30%,主要出口日本、韩国...</p>
          <div class="news-meta">
            <span class="date">
              <i class="fas fa-clock"></i>
              2024-10-12
            </span>
            <span class="views">
              <i class="fas fa-eye"></i>
              2580
            </span>
          </div>
        </div>
      </div>

      <!-- 平台动态 -->
      <div class="news-card">
        <div class="news-image">
          <img src="/images/news-2.jpg" alt="平台新功能上线" />
          <div class="category-tag">平台动态</div>
        </div>
        <div class="news-content">
          <h4 class="news-title">昌欣交易平台新功能正式上线,提升交易效率</h4>
          <p class="news-description">平台新增智能匹配功能,可根据供需信息自动推荐合适交易对象,大大提升交易效率和成功率...</p>
          <div class="news-meta">
            <span class="date">
              <i class="fas fa-clock"></i>
              2024-10-10
            </span>
            <span class="views">
              <i class="fas fa-eye"></i>
              1890
            </span>
          </div>
        </div>
      </div>

      <!-- 技术创新 -->
      <div class="news-card">
        <div class="news-image">
          <img src="/images/news-3.jpg" alt="智能种植技术" />
          <div class="category-tag">技术创新</div>
        </div>
        <div class="news-content">
          <h4 class="news-title">AI智能种植技术助力食用菌产业升级</h4>
          <p class="news-description">最新AI技术应用于食用菌种植,通过数据分析优化生长环境,提高产量和质量,为产业发展注入新动力...</p>
          <div class="news-meta">
            <span class="date">
              <i class="fas fa-clock"></i>
              2024-10-08
            </span>
            <span class="views">
              <i class="fas fa-eye"></i>
              3240
            </span>
          </div>
        </div>
      </div>

      <!-- 产业发展 -->
      <div class="news-card">
        <div class="news-image">
          <img src="/images/mushroom-strain.jpg" alt="产业发展规划" />
          <div class="category-tag">产业发展</div>
        </div>
        <div class="news-content">
          <h4 class="news-title">食用菌产业"十四五"发展规划正式发布</h4>
          <p class="news-description">国家发布食用菌产业发展规划,提出到2025年产业规模达到3000亿元,重点发展精深加工和品牌建设...</p>
          <div class="news-meta">
            <span class="date">
              <i class="fas fa-clock"></i>
              2024-10-05
            </span>
            <span class="views">
              <i class="fas fa-eye"></i>
              4120
            </span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
// 组件逻辑
</script>

<style lang="scss" scoped>
.changxin-express {
  background: #fff;
  border-radius: 8px;
  padding: 20px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  margin-bottom: 25px;

  .section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;

    h3 {
      display: flex;
      align-items: center;
      gap: 8px;
      margin: 0;
      font-size: 20px;
      font-weight: 600;
      color: #333;

      i {
        color: #e4393c;
        font-size: 22px;
      }
    }

    .more-link {
      display: flex;
      align-items: center;
      gap: 6px;
      color: #666;
      font-size: 14px;
      text-decoration: none;
      transition: all 0.3s;

      &:hover {
        color: #e4393c;
      }
    }
  }

  .news-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;

    @include tablet {
      grid-template-columns: repeat(2, 1fr);
      gap: 15px;
    }

    @include mobile {
      grid-template-columns: 1fr;
      gap: 15px;
    }

    .news-card {
      background: #fff;
      border-radius: 8px;
      overflow: hidden;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
      transition: all 0.3s ease;
      cursor: pointer;

      &:hover {
        transform: translateY(-4px);
        box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
      }

      .news-image {
        position: relative;
        height: 180px;
        overflow: hidden;

        img {
          width: 100%;
          height: 100%;
          object-fit: cover;
          transition: transform 0.3s ease;
        }

        .category-tag {
          position: absolute;
          top: 10px;
          left: 10px;
          background: #e4393c;
          color: #fff;
          padding: 4px 8px;
          border-radius: 4px;
          font-size: 12px;
          font-weight: 600;
        }

        &:hover img {
          transform: scale(1.05);
        }
      }

      .news-content {
        padding: 15px;

        .news-title {
          margin: 0 0 10px;
          font-size: 16px;
          font-weight: 600;
          color: #333;
          line-height: 1.4;
          display: -webkit-box;
          -webkit-line-clamp: 2;
          -webkit-box-orient: vertical;
          overflow: hidden;
        }

        .news-description {
          margin: 0 0 15px;
          font-size: 14px;
          color: #666;
          line-height: 1.5;
          display: -webkit-box;
          -webkit-line-clamp: 3;
          -webkit-box-orient: vertical;
          overflow: hidden;
        }

        .news-meta {
          display: flex;
          justify-content: space-between;
          align-items: center;
          font-size: 12px;
          color: #999;

          .date,
          .views {
            display: flex;
            align-items: center;
            gap: 4px;

            i {
              font-size: 11px;
            }
          }
        }
      }
    }
  }
}
</style>
